<template>
  <div class="trend">
    <div class="text" :style="{ color: textColor }">
      <slot v-if="slots.default"></slot>
      <span v-else>{{ text }}</span>
    </div>
    <div class="icon">
      <!-- <el-icon-arrowup
        :style="{ color: !reverseColor ? upIconColor : '#f5222d' }"
        v-if="type === 'up'"
      ></el-icon-arrowup>
      <el-icon-arrowdown
        :style="{ color: !downIconColor ? downIconColor : '#f5222d' }"
        v-else
      ></el-icon-arrowdown> -->
      <!-- 自定义图标 -->
      <component
        :is="`el-icon-${toLine(upIcon)}`"
        :style="{ color: !reverseColor ? upIconColor : '#f5222d' }"
        v-if="type === 'up'"
      ></component>
      <component
        :is="`el-icon-${toLine(upIcon)}`"
        :style="{ color: !downIconColor ? downIconColor : '#f5222d' }"
        v-else
      ></component>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { toLine } from "../../../utils";
import { useSlots, onMounted, computed } from "vue";
let slots = useSlots(); //判断父组件插槽有没有传递内容
console.log(slots);

let props = defineProps({
  //标记当前趋势是上升（up）还是下降 （down）
  type: {
    type: String,
    default: "up",
  },
  // 趋势显示的文字
  // 1、父组件传递过来的数据
  // 2、插槽
  text: {
    type: String,
    default: "文字",
  },
  //  上升趋势图标
  upIcon: {
    type: String,
    default: "ArrowUp",
  },
  //  下降趋势图标
  downIcon: {
    type: String,
    default: "ArrowDown",
  },
  //  上升趋势图标颜色
  upIconColor: {
    type: String,
    default: "#f5222d",
  },
  //  下降趋势图标颜色
  downIconColor: {
    type: String,
    default: "#52c41a",
  },
  //  上升趋势文字颜色
  upTextColor: {
    type: String,
    default: "#f5222d",
  },
  //  下降趋势文字颜色
  downTextColor: {
    type: String,
    default: "#52c41a",
  },
  //  颜色翻转只在默认的颜色下生效，如果使用了自定义颜色 这个属性就不生效
  reverseColor: {
    type: Boolean,
    default: false,
  },
});
let textColor = computed(() => {
  return props.type === "up" ? props.upTextColor : props.downTextColor;
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.trend {
  display: flex;
  align-items: center;
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
  .text {
    font-size: 12px;
    margin-right: 4px;
  }
}
</style>
